<template>
    <div class="bodyDiv">
      <Header :position="position"></Header>
        <div class="left">
            <el-card style="width: 100%;">
                <h4 style="margin: 0 50px 0 0">临界设备统计</h4>
                <dashboard id="dashboard" style="height: 300px;width: 100%;margin: -30px 0 -50px 0" :formatter="this.formatter"></dashboard>
            </el-card>
            <el-card style="margin-top: 10px">
                <h4 style="margin: 0 50px 0 0">修程修制信息</h4>
<!--                <LineHistogram style="height: 250px;width: 100%;"></LineHistogram>-->
                <Histogram style="height: 250px;width: 100%"></Histogram>
            </el-card>
            <el-card style="margin-top: 10px;height: 257px">
                <h4 style="margin: 0 50px 0 0">零件信息</h4>
                <el-table
                :data="testData0">
                    <el-table-column
                            label="零件"
                            prop="part">
                    </el-table-column>
                    <el-table-column
                            label="位置"
                            prop="position">
                    </el-table-column>
                    <el-table-column
                            label="使用年限"
                            prop="time">
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 25px"></el-pagination>
            </el-card>
        </div>
        <div class="right">
            <el-card style="width: 100%;height: 873px;text-align: left;">
                <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
                    <span>修程修制优化</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 10px; ">
                    <div>
                        <el-select placeholder="选择车种" style="margin-right: 10px"></el-select>
                        <el-select placeholder="选择车型" style="margin-right: 10px"></el-select>
                        <el-select placeholder="选择车号" style="margin-right: 10px"></el-select>
                        <el-select placeholder="选择零件" style="margin-right: 10px"></el-select>
                    </div>
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-arrow-left">筛选数据</el-button>
                    </el-button-group>
                </div>
                <el-table :data="testData"
                          style="width: 100%;" ref="table"
                          stripe
                          highlight-current-row
                          height="680px">
                    <el-table-column prop="class" label="车种">
                    </el-table-column>
                    <el-table-column label="车型" prop="type">
                    </el-table-column>
                    <el-table-column label="车号" prop="id">
                    </el-table-column>
                    <el-table-column label="零件" prop="part">
                    </el-table-column>
                    <el-table-column label="状态" prop="cond">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template>
                            <el-button size="mini" type="primary">修改</el-button>
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="一级修成周期" prop="period1"></el-table-column>
                    <el-table-column label="二级修成周期" prop="period2"></el-table-column>
                    <el-table-column label="三级修成周期" prop="period3"></el-table-column>
                    <el-table-column label="四级修成周期" prop="period4"></el-table-column>
                    <el-table-column label="五级修成周期" prop="period5"></el-table-column>-->
                </el-table>
                <el-pagination style="margin-top:5px;"></el-pagination>
            </el-card>
        </div>

    </div>
</template>

<script>
    import Header from "../../components/Header";
    import Dashboard from "../../components/charts/Dashboard";
    import Histogram from "../../components/charts/Histogram";
    export default {
      name: "MaintainOprimization",
      components:{Histogram, Dashboard, Header},
      data(){
        return{
            formatter:'',
          position:{
            secondTitle:'运维决策',
            thirdTitle:'修程修制优化'
          },
            testData0:[
                {
                    part:'轴承',
                    position:'良好',
                    time:'2021-2-1',
                },
                {
                    part:'轴承',
                    position:'良好',
                    time:'2021-2-1',
                },

            ],
          testData:[
            {
              class:'普通车',
              type:'QG-125',
              id:'3762',
              part:'轴承',
              cond:'良好',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
            {
                cond:'良好',
              class:'冷藏车',
              type:'QG-125',
              id:'3762',
              part:'轴承',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
            {
                cond:'良好',
              class:'普通车',
              type:'CF-365',
              id:'5628',
              part:'中子',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
            {
                cond:'良好',
              class:'普通车',
              type:'JI-361',
              id:'5628',
              part:'转子',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
          ],
        }
      },
      methods:{
      }
    }
</script>

<style scoped>
  .bodyDiv{
      display: flex;
      height: 875px;
  }
  .icon-plus{
    margin: 10px;
  }
    .left{
        width: 30%;
    }
    .right{
        margin-left: 10px;
        width: calc(70% - 10px);
    }
</style>
